<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="time-location">
        <span class="shi">{{currentTimes}}</span>
        <select v-model="selectedCity" class="bei">
          <option value="北京">北京</option>
          <!-- 其他城市选项 -->
        </select>
      </div>
      <div class="title">智慧旅游</div>
      <!-- 更多选项按钮 -->
    </div>

    <!-- 搜索框 -->
    <div class="search-bar">
      <input type="text" placeholder="景点/攻略/酒店住宿/休闲娱乐/美食" v-model="searchText" class="sou">

    </div>

    <!-- 热搜词 -->
    <div class="hot-search">
      <span>热搜:</span>
      <span v-for="(hotWord, index) in hotWords" :key="index">{{ hotWord }}</span>
    </div>

    <!-- 分类按钮 -->

    <div class="container">
      <button class="button-item" @click="goToHelp">
        <img src="../../static/images/屏幕截图 2025-01-16 094738.png" alt="帮助图标">
        <span>帮助</span>
      </button>
      <button class="button-item"  @click="jingdianPage">
        <img src="../../static/images/屏幕截图 2025-01-16 094744.png" alt="景点门票图标">
        <span>景点门票</span>
      </button>
      <button class="button-item" @click="homeViewPage">
        <img src="../../static/images/屏幕截图 2025-01-16 094747.png" alt="酒店住宿图标">
        <span>酒店住宿</span>
      </button>
      <button class="button-item" @click="goToEntertainment">
        <img src="../../static/images/屏幕截图 2025-01-16 094751.png" alt="休闲娱乐图标">
        <span>休闲娱乐</span>
      </button>
      <button class="button-item" @click="indexPage">
        <img src="../../static/images/屏幕截图 2025-01-16 094755.png" alt="美食图标">
        <span>美食</span>
      </button>
    </div>

    <!-- 推荐内容 -->
    <div class="recommendation">
      <!-- 第一个推荐 -->
      <div class="recommend-item">
        <img src="../../static/images/旅游.png" alt="推荐1" width="70px" height="500px" >
        <div class="recommend-content">
          <h3>{{ recommend1.title }}</h3>
          <p>{{ recommend1.description }}</p>
          <button @click="goToDetail(recommend1)">一键探店GO</button>
        </div>
      </div>

      <!-- 第二个推荐 -->
      <div class="recommend-item">
        <img src="../../static/images/旅游2.jpeg" alt="推荐2" width="70px" height="455px">
        <div class="recommend-content">
          <h3>{{ recommend2.title }}</h3>
          <p>{{ recommend2.description }}</p>
        </div>
      </div>

      <div class="recommend-item">
        <img src="../../static/images/旅游3.jpeg" alt="推荐2" width="70px" height="500px">
        <div class="recommend-content">
          <h3>{{ recommend3.title }}</h3>
          <p>{{ recommend2.description }}</p>
        </div>
      </div>

      <div class="recommend-item">
        <img src="../../static/images/旅游4.jpeg" alt="推荐2" width="70px" height="700px">
        <div class="recommend-content">
          <h3>{{ recommend4.title }}</h3>
          <span class="jj">{{ recommend4.title1 }}</span>
          <p>{{ recommend2.description }}</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      currentTimes: new Date().toLocaleTimeString(),
      selectedCity: '北京',
      searchText: '',
      hotWords: ['北京', '天安门', '亲子', '情侣'],
      recommend1: {
        title: '野玩 坐上火车去拉萨',
        description: '旅游产品：火车票、住宿等'
      },
      recommend2: {
        title: '杭州最值得去的十个景区',
        description: '甜甜 的星儿'
      },
      recommend3: {
        title: '三亚,南山一日游',
        description: '不知道'
      },
      recommend4: {
        title: '大理,西周古镇一日游',
        title1: '5000+收藏',
        description: '甜甜 的星儿'
      }
    };
  },
  methods:{
    homeViewPage(){
      this.$router.push('/homeview')
    },
    indexPage(){
      this.$router.push('/Food')
    },
    jingdianPage(){
      this.$router.push('/jingdian')
    },
    goToHelp() {
      // 跳转到帮助页面的逻辑
      this.$router.push('/help')
    },
    goToTicket() {
      // 跳转到景点门票页面的逻辑
    },
    goToHotel() {
      // 跳转到酒店住宿页面的逻辑
    },
    goToEntertainment() {
      this.$router.push('/leisure')
      // 跳转到休闲娱乐页面的逻辑
    },
    goToFood() {
      // 跳转到美食页面的逻辑
    },
    goToDetail(recommend) {
      // 跳转到推荐详情页面的逻辑，可根据推荐内容传递参数
    }
  }
}
</script>

<style scoped>
.recommend-content button{
  background-color: transparent;
}
.home-container {
  padding: 20px;
}

.search-bar {
  width: 100%;
  margin-bottom: 20px;
}

input {
  border: 1px solid #ccc;
  padding: 10px;
  width: 100%;
}

.hot-search {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-left: 130px;
}

.hot-search span {
  padding: 5px 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
  margin-bottom: 10px;
}

.icon-item img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.banner img {
  width: 100%;
  margin-bottom: 20px;
}
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.button-item {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  padding: 15px;
  cursor: pointer;
  border: none; /* 取消边框 */
  margin-right: 45px; /* 设置右侧距离 */
}
.button-item:last-child {
  margin-right: 0; /* 最后一个元素右侧距离设为0 */
}
.button-item img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.button-item span {
  font-size: 14px;
  color: #333;
}
.tab-item img {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-item button {
  text-decoration: none;
  border: none;

}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px;
  background-color: rgba(12, 77, 142, 0.85);
  margin-left: -15px;
}

.time-location {
  display: flex;
  align-items: center;
}

.title {
  font-size: 25px;
  font-weight: bold;
}

.search-bar {
  display: flex;
  align-items: center;
  width: 80%;
  margin-top: 20px;
  padding-left: 20px;
  margin-left: 110px;
}

.search-bar input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.search-bar button {
  padding: 20px 25px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 20px;
  margin-left: 10px;
  font-size: 15px;
}

.hot-search {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.hot-search span {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 20px;
}


.category-buttons button {
  padding: 15px 15px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.recommendation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 80%;
  margin-top: 20px;
}

.recommend-item {
  width: 45%;
  margin-bottom: 20px;
}

.recommend-item img {
  width: 100%;
  border-radius: 5px;
}

.recommend-content {
  padding: 10px;
}
.recommend-content button{

}
.footer a {
  text-decoration: none;
  color: #000;
}
.recommendation .recommend-item .jj{
  height: 700px;
}
.recommendation .recommend-item .ee{
  height: 700px;
}
.bei{
  font-size: 15px;
  position: absolute;
  top: 60px;
  left: 30px;
  right: auto;
}
.shi{
  font-size: 15px;
  position: absolute;
  top: 30px;
  left: 30px;
  right: auto;
}
.search-bar .sou{
  border-radius: 500px;
  padding-left: 25px;
  height: 45px;
  font-size: 20px;
}

</style>